<template>
    <div>
       <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ name: 'stusubmit' }">提交我的项目</el-breadcrumb-item>
        </el-breadcrumb>

        <div class="new-box">
            <el-steps :active="active" finish-status="success">
                <el-step title="项目的基本信息" ></el-step>
                <el-step title="项目的重要信息" ></el-step>
                <el-step title="提交项目" ></el-step>
            </el-steps>

            <div v-if="active==1">
                <el-col :span="12" style="margin-top:20px">
                    
                    <el-form
                        label-width="100px"
                        :rules="rules"
                        :model="form"
                        ref="formone"
                    >
                        <el-form-item label="项目名称" prop="xmname">
                            <el-input v-model="form.xmname" placeholder="请输入项目名称" ></el-input>
                        </el-form-item>
                        <el-form-item  label="项目链接" prop="xmlink" >
                            <el-input   v-model="form.xmlink" placeholder="请输入项目链接" ></el-input>
                        </el-form-item>
                        <el-form-item label="项目类别" prop="xmcategory" >
                            <el-select v-model="form.xmcategory" placeholder="请输入项目类别" >
                                <el-option :value="cate.procode" :label="cate.proname" v-for="(cate,i) in categories" :key="i"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-form>
                    <el-button style="margin-top: 12px;" @click="nextone('formone')">下一步</el-button>
                </el-col>
            </div>
            <div v-if="active==2">
                <el-col :span="12" style="margin-top:20px">
                    <el-form
                        label-width="100px"
                        :rules="rules"
                        :model="form"
                        ref="formtwo"
                    >
                        <el-form-item label="项目描述" prop="xmdesc">
                            <el-input  v-model="form.xmdesc" placeholder="请输入项目描述" ></el-input>
                        </el-form-item>
                        <el-form-item label="项目技术" prop="xmtech" >
                            <el-input type="textarea"  v-model="form.xmtech" placeholder="请输入项目技术" ></el-input>
                        </el-form-item>
                        <el-form-item label="难点亮点" prop="xmbug" >
                            <el-input type="textarea" v-model="form.xmbug" placeholder="请输入项目难点"></el-input>
                        </el-form-item>
                    </el-form>

                    <el-button style="margin-top: 12px;" @click="nextone('formtwo')">下一步</el-button>
                    <el-button type="danger" style="margin-top: 12px;" @click="active--">上一步</el-button>
                </el-col>
            </div>
            <div v-if="active==3">
                <el-col :span="12" style="margin-top:20px">
                    <el-button style="margin-top: 12px;" @click="active--">上一步</el-button>
                    <el-button style="margin-top: 12px;" type="success" @click="submitxm" >提交项目</el-button>
                </el-col>
            </div>
        </div>
    </div>
</template>


<script>
import {mapState,mapMutations} from "vuex"
export default {
    beforeRouteEnter(to,from,next){
        next();
    },
    data(){
        return {
            active:1,
            form:{},
            rules:{
                xmname:[
                    {required:true,message:"请输入项目名称",trigger:'blur'}
                ],
                xmlink:[
                    {required:true,message:"请输入项目链接",trigger:'blur'}
                ],
                xmcategory:[
                    {required:true,message:"请选择项目类别",trigger:'change'}
                ],
                xmdesc:[
                    {required:true,message:"请输入项目描述",trigger:'blur'}
                ],
                xmtech:[
                    {required:true,message:"请输入项目技术",trigger:'blur'}
                ],
                xmbug:[
                    {required:true,message:"请选择项目难点",trigger:'blur'}
                ],
            },
            categories:[]
        }
    },
    computed:{
        ...mapState(['xuekeList','userinfo'])
    },
    methods:{
        ...mapMutations(['changexuekeList']),
        next(){
            this.active++;
        },
        nextone(formname){
            this.$refs[formname].validate(valid=>{
                if(valid){
                    this.active++;
                }else{
                    this.$message.error("请务必填写...")
                }
            })
        },
        // nexttwo(){
        //     this.$refs.formtwo.validate(valid=>{
        //         if(valid){
        //             this.active++;
        //         }else{
        //             this.$message.error("请务必填写...")
        //         }
        //     })
        // },
        getxmutxtlist(){
            console.log(this.userinfo) 
        },
        submitxm(){
            console.log(this.form)
            this.$axios.post("/vue/addxmone",{
                ...this.form,
                mobile:this.userinfo.mobile,
                username:this.userinfo.username,
                xmbjid:this.userinfo.bjid,
                xmbjname:this.userinfo.bjname,
                xkid:this.userinfo.xkid
            }).then(res=>{
                if(res.data.type){
                    this.$router.push({name:"stuproject"})
                }
            })
        }
    },
    mounted(){
   
        this.$axios.post("/vue/userinfo")
        .then(res=>{
            if(res.data.result.xkid){
              
                this.$axios.post("/vue/getpronamelist",{
                    xkid:res.data.result.xkid
                })
                .then(res=>{
                    this.categories = res.data.result;
                })
            }else{
                this.$alert('你没有选取学科和班级,将不能提交项目', '提示', {
                    confirmButtonText: '确定',
                    callback: action => {
                        this.$router.push({path:"/home/patmine"})
                    }
                });
            }
        })

    }
}
</script>
